<template>
  <fieldset>
    <legend>动态组件练习</legend>
    <button
      v-for="(item, index) in btnArr"
      @click="activeName = item"
      :class="['tab-button', { active: item === activeName }]"
      :key="index"
    >
      {{ item }}
    </button>
    <div class="tab" :is="tab"></div>
  </fieldset>
</template>
<script>
// 'tab-button' 加单引号的意思是为了解析成字符串的tab-button,不加的话，会去data里面去找有没有定义一个为tab-button的属性，要解析为字符串，就要加引号
// active:item===activeName  active后面为true的时候才会生效定义的属性，所以要判断名称是不是一样  active需要条件才能生效
//tab按钮点击激活思路
//1.tab-button类名是固定的,active类名是有条件加上的,点击的时候加上
//2.点击的时候,让储存了组件名字的属性,进行切换,赋值给is
//动态组件是通过is属性来进行切换的,is属性的值是组件的名字

//引入组件
import Email from "./Email.vue";
import Home from "./Home.vue";
import Paylist from "./Paylist.vue";

export default {
  data() {
    return {
      activeName: "Email", //保存被激活时按钮的名称，默认是Email
      btnArr: ["Email", "Home", "Paylist"], //动态渲染的初始数据
    };
  },
  components: {
    //注册成为自己的子组件
    "Tab-Email": Email,
    "Tab-Home": Home,
    "Tab-Paylist": Paylist,
  },
  computed: {
    tab() {
      return "Tab-" + this.activeName; //计算一个属性的名字
    },
  },
};
</script>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: hotpink;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

h1 {
  margin: 0;
}
</style>
